<template>
  <div class="wrapper">
    <div class="glass">
      <!-- 环形进度条 -->
      <svg class="ring" viewBox="0 0 100 100">
        <!-- 轨道（背景环） -->
        <circle cx="50" cy="50" r="45" class="ring-track" />
        <!-- 填充（进度环） -->
        <circle
          cx="50"
          cy="50"
          r="45"
          class="ring-fill"
          :stroke-dasharray="circumference"
          :stroke-dashoffset="offset"
        />
      </svg>

      <!-- 显示时间 mm:ss -->
      <div class="time">{{ formatted }}</div>

      <!-- 控制按钮 -->
      <div class="controls">
        <button class="btn start" @click="start">▶</button>
        <button class="btn pause" @click="pause">❚❚</button>
        <button class="btn reset" @click="reset">↺</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue'

// 当前经过的总秒数
const seconds = ref(0)

// 定时器引用
let timer = null

// 圆的周长：2πr，r = 45
const circumference = 2 * Math.PI * 45

/* 格式化时间：mm:ss */
const formatted = computed(() => {
  const minutes = Math.floor(seconds.value / 60)
  const secs = seconds.value % 60
  return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
})

/* 计算进度条的偏移量（实现环形动画） */
// 原理：stroke-dashoffset 控制虚线起点，值越大，环越“空”
// 我们希望每 60 秒完成一圈（像秒针）
const offset = computed(() => {
  const currentSecond = seconds.value % 60 // 取模，确保在 0-59 范围内
  // 计算当前秒对应的偏移量
  // 当 currentSecond = 0 时，offset = circumference（环为空）
  // 当 currentSecond = 59 时，offset ≈ 0（环几乎满）
  return circumference - (currentSecond * circumference / 60)
})

/* 控制函数 */
function start() {
  // 防止重复启动定时器
  if (timer) return
  timer = setInterval(() => {
    seconds.value++
  }, 1000)
}

function pause() {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}

function reset() {
  pause()
  seconds.value = 0
}

// 组件卸载时清理定时器，防止内存泄漏
onUnmounted(() => {
  pause()
})
</script>

<style scoped>
/* 全屏居中布局 */
.wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  font-family: system-ui, -apple-system, sans-serif;
}

/* 玻璃拟态面板 */
.glass {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 环形 SVG 样式 */
.ring {
  position: absolute;
  width: 180px;
  height: 180px;
  /* 旋转 -90 度，使进度从顶部开始 */
  transform: rotate(-90deg);
}

/* 背景轨道（灰色虚环） */
.ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 8;
}

/* 填充环（彩色进度条） */
.ring-fill {
  fill: none;
  stroke: #00f5d4;
  stroke-width: 8;
  stroke-linecap: round;
  /* 添加平滑过渡动画 */
  transition: stroke-dashoffset 0.3s linear;
}

/* 时间显示样式 */
.time {
  font-size: 56px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 245, 212, 0.6);
  margin-bottom: 24px;
  z-index: 1;
}

/* 控制按钮组 */
.controls {
  display: flex;
  gap: 16px;
  z-index: 1;
}

/* 按钮通用样式 */
.btn {
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn:hover {
  transform: scale(1.1);
}

/* 按钮颜色（渐变） */
.start {
  background: linear-gradient(135deg, #00f5d4, #00b8ba);
}

.pause {
  background: linear-gradient(135deg, #fee440, #f9931e);
}

.reset {
  background: linear-gradient(135deg, #f72585, #b5179e);
}
</style>